<style src="@/css/components/table.css"></style>
<style src="@/css/components/el-dialog.css"></style>
<style>
.select_resource {
    width:886px;
    margin:0 auto;
}

.select-resourece-tip {
    width:100%;
    height:56px;
    background:rgba(229,247,255,1);
    border-radius:4px;
    border:1px solid rgba(53,119,251,1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.select-resourece-tip  i.iconfont {
    font-size:10px;
    margin-right: 10px;
}

.select-resourece-tip {
    font-size:14px;
    color:#3577FB;
}

.select_resource .operate > i {
    cursor: pointer;
    color: #C1C6D4;
}


.select_resource .operate > .icon.iconfont.forbid {
    color:#E1E7EB;
}

.resource-checkbox {
    margin:20px 0 40px;
    color:#7485B1;
}

.btn-cont {
    padding-bottom: 60px;
}

.select_resource .showdow {
    box-shadow: 2px 2px 5px 0px rgba(53,119,251,0.39);
}

.select_resource .btn-cont button {
    min-width:120px;
}

.select_resource .next-plan-cont .search-cont {
    display: flex;
    justify-content: space-between;
}

.select_resource .next-plan-cont .search-cont > div {
    display: flex;
}

.select_resource .next-plan-cont .search-cont .el-input {
    width:160px;
}

.select_resource .next-plan-cont .search-cont > div .el-input {
    width:120px;
}


.select_resource .btnCont {
    display: flex;
    justify-content: flex-end;
    padding-top:32px;
    /*flex-direction: column;*/
}

.next-plan-books {
    width:100%;
    height: 220px;
    overflow-y: auto;
    display: flex;
    margin-top:12px;
    flex-wrap: wrap;
    padding-top:8px;
}

.next-plan-books .showcave {
    display: flex;
    flex-wrap: wrap;
}


.next-plan-books .next-plan-book-list {
    display: flex;
    /*justify-content: center;*/
    width:124px;
    height: 187px;
    flex-direction: column;
    align-items: center;
    margin:0px 3px 16px;
    cursor: pointer;
}


.next-plan-books .next-plan-book-list .next-plan-img {
    width: 124px;
    height:127px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.next-plan-books .next-plan-book-list .next-plan-img img{
    max-width: 95%;
    height:95%;
}




.next-plan-books .next-plan-book-list .next-plan-book-cont{
    background-color: #fff;
    padding:0 10px;
}

.next-plan-books .next-plan-book-list .next-plan-book-cont p {
    font-size:12px;
    color:#7485B1;
    padding:12px 0 2px;
}

.next-plan-books .next-plan-book-list .next-plan-book-cont span {
    font-size:12px;
    color:#C1C6D4;
}

.next-plan-books .next-plan-book-list:hover,  .next-plan-books .next-plan-book-list.active {
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 12px 0px rgba(53,119,251,0.2);
}

.next-plan-books .next-plan-book-list .next-plan-img .shade {
    width:100%;
    height: 100%;
    background:rgba(116,133,177,1);
    display: none;
    position: absolute;
    left:0;
    top:0;
}

.next-plan-books .next-plan-book-list .next-plan-img i {
    font-size:48px;
    color:#fff;
    position: absolute;
    left:50%;
    top:50%;
    margin:-30px 0 0 -24px;
    z-index: 99;
    opacity: .8;
    display: none;
}

.next-plan-books .next-plan-book-list:hover .next-plan-img .shade, .next-plan-books .next-plan-book-list.active .next-plan-img .shade  {
    opacity:0.4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.next-plan-books .next-plan-book-list:hover .next-plan-img i, .next-plan-books .next-plan-book-list.active .next-plan-img i {
    display: block;
}

.next-plan-books .el-button--text {
    padding:12px 14px;
}
</style>
<template>
    <div class="select_resource">
        <div class="select-resourece-tip" @click="dialogSelectResource = true">
            <span><i class="icon iconfont"></i>选择资源</span>
        </div>

        <el-table :data="selectList" style="width: 100%; margin-top:20px" class="newTab first-table">
            <el-table-column label="资源名称" min-width="50%">
                <template slot-scope="scope">
                    <el-popover
                        popper-class="popover"
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        :content="scope.row.ResName">
                        <span slot="reference">{{ scope.row.ResName.substr(0,10) }}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="Stocks" label="可分配数量" min-width="25%"></el-table-column>

            <el-table-column label="操作" min-width="25%">
                <template slot-scope="scope">
                    <div class="operate">
                        <!-- 上 -->
                        <i class="icon iconfont forbid" v-if=" scope.$index == 0"></i>
                        <i class="icon iconfont" @click="singleMove(scope.$index, scope.$index-1)" v-else></i>
                        <!-- 上 -->
                        <i class="icon iconfont forbid" v-if=" scope.$index == selectList.length-1 "></i>
                        <i class="icon iconfont" @click="singleMove(scope.$index, scope.$index + 1)" v-else></i>
                        <i class="icon iconfont" @click="singleDelete(scope.$index)"></i>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-checkbox v-model="IsUnlocked" class="resource-checkbox">开启解锁模式(开启后，学员学完上一节才能学习下一节)</el-checkbox>

        <div class="btn-cont">
            <el-button @click="prveFn">上一步</el-button>
            <el-button type="primary showdow" @click="configPost">下一步</el-button>
        </div>

        <!-- 选书弹窗 -->
        <el-dialog  :visible.sync="dialogSelectResource" width="720px" class="new-dialog" :class="selectClass">
            <div slot="title">
                选择资源<span>已选择{{ selectAll.length }}个</span>
            </div>

            <div class="next-plan-cont">
                <div class="search-cont">
                    <div>
                        <el-cascader
                            style="margin-right:20px"
                            placeholder="资源类型"
                            :options="classify"
                            :props="props"
                            filterable
                            :show-all-levels="false"
                            @change="handleChange"
                        ></el-cascader>

                        <el-select v-model="resSubCateIDStr" placeholder="请选择">
                            <el-option
                              v-for="item in kindList"
                              :key="item.ResSubCateID"
                              :label="item.CateName"
                              :value="item.ResSubCateID">
                            </el-option>
                        </el-select>
                    </div>

                    <el-input
                        placeholder="请输入题目名称"
                        suffix-icon="el-icon-search"
                        v-model="search">
                    </el-input>
                </div>

                <div class="next-plan-books" @scroll="scrollFn">
                    <div class="showcave" id="scrollCont">
                        <div class="next-plan-book-list" :class="{ 'active': !!item.state }"  @click="selectedFn(item, index)" v-for="(item, index) of list" :key="index">
                            <div class="scroll">
                                <div class="next-plan-img">
                                    <i class="icon iconfont"></i>
                                    <div class="shade"></div>
                                    <img :src="item.ResCover" :alt="item.ResName">
                                </div>
                                <div class="next-plan-book-cont">
                                    <p :title="item.ResName">{{item.ResName.substr(0, 8)}} </p>
                                    <span>剩余分配{{ item.resourceID == '0' ? '无限' : item.Stocks + '份' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btnCont">
                <el-button class="el-button el-button--text" @click="dialogSelectResource = false">取消</el-button>
                <el-button type="primary"  class="showdow" @click="getComResListByComResIDs">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    Array.prototype.someIndex = function(x,y){
      this.splice(x,1, ...this.splice(y, 1, this[x]))
      return this;
    }

    import qs from 'qs'
    import com from '@/js/common.js'

    export default {
        props:['comResIds', 'lockedState', 'studyID'],
        data() {
            return {
                list:[],
                dialogSelectResource:false,
                search:'',
                resTypeIDs:'',
                userDefined:'',
                resSubCateIDStr:'',
                type:'',
                category:'',
                classify:[],
                selectAll:[],
                openState:'',
                page:1,
                pagesize:10,
                IsUnlocked:false,
                scrollCont:'',
                props:{
                    value:'ResTypeID',
                    label:'ResTypeName',
                    children:'child'
                },

                selectList:[]
            }
        },

        watch:{
             resSubCateIDStr() {
                this.page = 1
                this.list = []
                this.getList()
            },

            resTypeIDs() {
                this.page = 1
                this.list = []
                this.getList()
            },

            dialogSelectResource(value) {
                if(!!value) {
                    this.list.map((item)=>{
                        item.state = this.selectAll.indexOf(item.ComResID) > -1
                    })
                }
            },

            comResIds(value) {
                if( !value ) return;
                this.selectAll = value.split(',')
                this.getComResListByComResIDs()
            },

            lockedState(value){
                this.IsUnlocked = ( value == '0' ? false : true )
            },

            search() {
                this.page = 1
                this.list = []
                this.getList()
            }
        },

        methods:{
            // 上下移
            singleMove(x, y) {
                this.selectList.someIndex(x,y)
            },

            // 删除当前选择数据
            singleDelete(index) {
                this.selectList.splice(index, 1)
                this.selectAll.splice(index, 1)
            },

            prveFn() {
                this.$emit('prve')
            },

            // 滚动加载
            scrollFn(e) {
                if( this.openState) return;

                let target = e.target
                let [top, height, contTop] = [target.scrollTop, target.offsetHeight, document.getElementById('scrollCont').scrollHeight]
                if(top + height >  contTop){

                    if( this.page  < Math.ceil(this.total / this.pagesize)   ) {
                        this.openState = true
                        this.page ++
                        this.getList()
                    }
                }

            },

            configPost() {
                this.$emit('setComResiD', {
                    IsUnlocked: Number(this.IsUnlocked),
                    ComResIDs: this.selectList
                })
            },

            // 选择资源确定
            selectedFn(item, index) {
                if(!item.state) {
                    this.selectAll.push(item.ComResID)
                } else {
                    let index = this.selectAll.indexOf(item.ComResID)
                    index > -1 && this.selectAll.splice(index,1)
                }

                item.state = !item.state
                this.list.splice(index,1, item)

            },

            // 资源类型选择
            handleChange(value) {
                this.resTypeIDs = value[value.length-1]
            },

            // 获取资源
            async getComResListByComResIDs() {
                let param = {
                    'comResIDs': this.selectAll.join(','),

                }

                if( !!this.studyID) {
                    param['StudyID'] =  this.studyID
                }

                const {data} = await axios.post('/com/com-res/getComResListByComResIDs', qs.stringify(param))

                if (data.flag === 1) {
                    this.selectList = data.data.Row
                    this.dialogSelectResource = false
                }
            },


            //获取类别
            async getClassifyType() {
                const {data} = await axios.post('/com/res-cates/comResTypeList')

                if (data.flag === 1) {
                    // this.kindList = data.data.ResCateList
                    this.kindList = [{ CateName:"全部", ResSubCateCount:"", ResSubCateID:""}].concat(data.data.ResCateList)
                    // this.kindList.push({
                    //     CateName: '自定义',
                    //     ResSubCateID: -1
                    // })
                } else {
                    alert(data.msg)
                }
            },

            // 根据资源ID获取类型
            async getClassify() {
                const {data} = await axios.post('/com/res-cates/comResTypeTree')

                if (data.flag === 1) {
                    this.classify = [{ResTypeID:'', ResTypeName: '全部'}].concat(data.data)

                    this.classify.push({
                        ResTypeID: 0,
                        ResTypeName: '未分类'
                    })

                } else {
                    alert(data.msg)
                }
            },

            // 获取全部资源
            async getList() {

                const params = {
                    page: this.page,
                    pagesize: this.pagesize,
                    enter: this.search,
                    resTypeIDs: this.resTypeIDs,
                    resSubCateIDStr: this.resSubCateIDStr
                }


                const {data} = await axios.post('/com/com-res/comResourceList', qs.stringify(params))

                if (data.flag === 1) {
                    this.loaded = true
                    this.loading = false

                    let imgArr = []

                    if(!Array.isArray(data.data.Row) && !data.data.Row.length) return;

                    data.data.Row.forEach(item=>{
                        imgArr.push({url: item.ResCover,param:'image/resize,m_fixed,h_300,w_400'})
                    });

                    com.getFullOssFiles(imgArr,(fullUrlArr)=>{
                        data.data.Row.forEach((item,index)=>{
                            item.ResCover = fullUrlArr[index]
                        });
                    })


                    this.list = this.list.concat(data.data.Row.map((item) => {
                        this.selectAll.indexOf(item.ComResID) > -1 ? (item.state = true) : (item.state = false)
                        return item
                    }))


                    this.total = data.data.Total
                    this.openState = false

                } else {
                    alert(data.msg)
                }
            }
        },

        created() {
            this.getClassify()
            this.getClassifyType()
            this.getList()

        }
    }
</script>
